<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>P66 动手实践：省份城市的三级联动</title>
</head>

<body>
    <select id="province">
        <option value="-1">请选择</option>
    </select>
    <select id="city"></select>
    <select id="country"></select>
    <script>
        var provinceArr = ['上海', '江苏', '河北'];
        var cityArr = [
            ['上海市'],
            ['苏州市', '南京市', '扬州市'],
            ['石家庄', '秦皇岛', '张家口']
        ];
        var countryArr = [
            [
                ['黄浦区', '静安区', '长宁区', '浦东区']
            ], [
                ['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
                ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
                ['邗江区', '广陵区', '江都区']
            ], [
                ['长安区', '桥西区', '新华区', '井陉矿区'],
                ['海港区', '山海关区', '北戴河区', '抚宁区'],
                ['桥东区', '桥西区', '宣化区', '下花园区']
            ]
        ];
        function createOption(obj, data) {
            for (var i in data) {
                var op = new Option(data[i], i);
                obj.options.add(op);
            }
        }
        var province = document.getElementById('province');
        createOption(province, provinceArr);
        var city = document.getElementById('city');
        province.onchange = function () {
            city.options.length = 0;
            createOption(city, cityArr[province.value]);
            if (province.value >= 0) {
                city.onchange();
            } else {
                country.options.length = 0;
            }
        };
        var country = document.getElementById('country');
        city.onchange = function () {
            country.options.length = 0;
            createOption(country, countryArr[province.value][city.value]);
        };
    </script>
    <a href="../首页/page03.html">
        <h2>返回上一页面</h2>
    </a>
</body>

</html>